{% extends 'base.html' %}
{% load staticfiles %}
{% block content %}
    <!------------------banner-------------------->
<script src="{% static 'js/jquery.superslide.2.1.1.js' %}" type="text/javascript"></script>
<div class="h_banner">
	<ul class="h_b_list">
        {% for banner in banners %}
        <li><a style="background:url({{ MEDIA_URL }}{{ banner.image }}) no-repeat center;" href="{{ banner.url }}"></a></li>
        {% endfor %}
	</ul>
	<a class="prev" href="javascript:void(0)"></a>
	<a class="next" href="javascript:void(0)"></a>
</div>
<script>
/*鼠标移过，左右按钮显示*/
$(".h_banner").hover(function(){
	$(this).find(".prev,.next").fadeTo("show",0.5);
},function(){
	$(this).find(".prev,.next").hide();
})
/*鼠标移过某个按钮 高亮显示*/
$(".prev,.next").hover(function(){
	$(this).fadeTo("show",1);
},function(){
	$(this).fadeTo("show",0.7);
})
$(".h_banner").slide({ titCell:".num ul" , mainCell:".h_b_list" , effect:"fold", autoPlay:true, delayTime:700 , autoPage:true });
</script>

<!------------------广告-------------------->
<div class="h_gg">
    <a title="" href="#"><img alt="" src="{% static 'images/g1.jpg' %}"/></a>
    <a title="" href="#"><img alt="" src="{% static 'images/g2.jpg' %}"/></a>
    <a title="" href="#"><img alt="" src="{% static 'images/g3.jpg' %}"/></a>
</div>
<!------------------精彩活动-------------------->
<div class="h_bg1_g"></div>
<div id="h_activity">
    <div class="cw1200" style="width: 1500px">
        <div class="title"><img alt="" src="{% static 'images/h_title1.png' %}"/></div>
        <div class="con">
            {% for active in actives %}
            <div class="box" style="width: 480px;">
                <a title="{{ active.title }}" href="{% url 'scenicspots:active_detail' active.id %}">
                    <img style="width: 100%;height: 100%" alt="{{ active.title }}" class="scale-effect" src="{{ MEDIA_URL }}{{ active.image }}"/>
                    <p>{{ active.title }}</p>
                    <span><i class="am-icon-clock-o"></i>{{ active.go_time|date:"Y/m/d" }}</span>
                </a>
            </div>
            {% endfor %}
            <div class="clear"></div>
        </div>
    </div>
</div>
<div class="h_bg1_g"></div>

<div id="h_scenic">
    <div class="cw1200">
        <div class="title"><img alt="" src="{% static 'images/h_title2.png' %}"/></div>
        <div class="con">
            <div class="tag"><img alt="" src="{% static 'images/h_title2_t.jpg' %}"/></div>
            <div class="box">
                <ul>
                    {% for natural_spot in natural_spots %}
                    <li><a title="" href="{% url 'scenicspots:scenic_detail' natural_spot.id %}"><img alt="" class="scale-effect" src="{{ MEDIA_URL }}{{ natural_spot.image }}"/><span>{{ natural_spot.name }}</span></a></li>
                    {% endfor %}
                    <div class="clear"></div>
                </ul>
                <div class="more"><a href="{% url 'scenicspots:all' %}?list_type=scenic">热门景区<span>+</span></a></div>

            </div>
            <div class="box">
                <ul>
                    {% for leisure_spot in leisure_spots %}
                        <li><a title="" href="{% url 'scenicspots:scenic_detail' leisure_spot.id %}"><img alt="" class="scale-effect" src="{{ MEDIA_URL }}{{ leisure_spot.image }}"/><span>{{ leisure_spot.name }}</span></a></li>
                    {% endfor %}
                    <div class="clear"></div>
                </ul>
                <div class="more"><a title="" href="{% url 'scenicspots:all' %}?list_type=scenic">休闲度假<span>+</span></a></div>
            </div>
            <div class="clear"></div>
        </div>
    </div>
</div>
<!------------------洛阳特产-------------------->
<div id="h_project">
    <div class="cw1200">
        <div class="title"><img alt="" src="{% static 'images/h_title4.png' %}"/></div>
        <div class="con">
            <ul>
                {% for product in products %}
                    <li>
                    <a title="" href="{% url 'shop:pro_detail' product.id %}">
                        <img style="width: 100%;height: 100%" alt="" class="scale-effect" src="{{ MEDIA_URL }}{{ product.mainimg }}"/>
                        <p>{{ product.name }}</p>
                    </a>
                </li>
                {% endfor %}

            </ul>
        </div>
    </div>
</div>
<!------------------游记文章-------------------->
<div id="h_note">
    <div class="cw1200">
        <div class="title"><img alt="" src="{% static 'images/h_title5.png' %}"/></div>
        <div class="con">
            <ul>
                {% for diary in diarys %}
                    <li>
                    <div class="box">
                        <div class="pic">
                            <a title="" href="{% url 'diarys:details' diary.id %}"><img alt="" class="scale-effect" src="{{ MEDIA_URL }}{{ diary.image }}"/></a>
                        </div>
                        <div class="user">
                            <div class="head"><img alt="" src="{{ MEDIA_URL }}{{ diary.user.portrait }}"/></div>
                            <p>{{ diary.user.nickname }}</p>
                            <span><label><img alt="" src="{% static 'images/state_icon1.png' %}"/>{{ diary.checknum }}</label><label><img src="{% static 'images/state_icon2.png' %}"/>{{ diary.commentsnum }}</label></span>
                        </div>
                        <div class="cont">
                            <a title="" href="{% url 'diarys:details' diary.id %}"><h3>{{ diary.title }}</h3></a>
                            <p>{{ diary.content|striptags|truncatechars:"50" }}</p>
                        </div>
                    </div>
                </li>
                {% endfor %}
                <div class="clear"></div>
            </ul>
        </div>
    </div>
</div>
<!------------------首页新闻-------------------->
<div id="h_news">
    <div class="cw1200">
        <div class="activity_news fl">
            <div class="title"><img alt="" src="{% static 'images/h_title6.png' %}"/></div>
            <div class="con">
                <ul>
                    {% for active_new in active_news %}
                        <li><a title="" href="{% url 'news:news_detail' active_new.id %}"><img class="scale-effect" src="{{ MEDIA_URL }}{{ active_new.image }}"/><p>{{ active_new.title }}</p></a></li>
                    {% endfor %}
                </ul>
            </div>
        </div>
        <div class="hot_news fr">
            <div class="title"><img src="{% static 'images/h_title7.png' %}"/></div>
            <div class="con">
                <div data-am-widget="slider" class="pic am-slider am-slider-c4" data-am-slider='{"controlNav":false}'>
                    <ul class="am-slides">
                        {% for hot_new in hot_news %}
                        <li>
                            <a href="{% url 'news:news_detail' hot_new.id %}">
								<img style="height: 200px;width: 500px" alt="" src="{{ MEDIA_URL }}{{ hot_new.image }}"/>
								<div class="am-slider-desc">{{ hot_new.title }}</div>
							</a>
                        </li>
                        {% endfor %}
                    </ul>
                </div>

                <div class="list">
                    <ul>
                        {% for new in news %}
                            <li><a title="" href="{% url 'news:news_detail' new.id %}">{{ new.title }}</a><span>{{ new.add_times|date:"Y/m/d" }}</span></li>
                        {% endfor %}
                    </ul>
                </div>
            </div>
        </div>
        <div class="clear"></div>
    </div>
</div>
{% endblock %}